<template>
    <div class="register_container">
        <h1 class="title">注册</h1>
        <!--        头像区-->
        <div class="login_box">
            <div class="img_head"><img src="../assets/image/login-header.jpg" alt=""></div>
        </div>
        <!--        登录表单区-->
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login_form">
            <el-form-item prop="username" label="用户名">
                <el-input v-model="form.username" prefix-icon="el-icon-user-solid" clearable></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
                <el-input v-model="form.password" prefix-icon="el-icon-lock" show-password clearable></el-input>
            </el-form-item>
            <el-form-item prop="rePassword" label="确认密码">
                <el-input v-model="form.rePassword" prefix-icon="el-icon-lock" show-password clearable></el-input>
            </el-form-item>
            <el-form-item prop="email" label="邮箱">
                <el-input v-model="form.email" prefix-icon="el-icon-postcard" clearable></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="电话">
                <el-input v-model="form.phone" prefix-icon="el-icon-phone" clearable></el-input>
            </el-form-item>
            <el-form-item prop="qq" label="qq">
                <el-input v-model="form.qq" prefix-icon="el-icon-lock" clearable></el-input>
            </el-form-item>
            <el-form-item prop="checkCode" label="验证码">
                <el-input style="width: 50%;float: left" v-model="form.checkCode" prefix-icon="el-icon-lock" clearable></el-input>
                <el-button style="float: right;" type="primary" @click="getCheckCode()" round :disabled="!(usernameState&&emailState&&!reClick)">获取验证码</el-button>
            </el-form-item>
            <el-form-item style="text-align: right">
                <el-button type="primary" @click="submitForm('form')" round>注册</el-button>
                <el-button type="info" @click="resetForm('form')" round>重置</el-button>
            </el-form-item>
            <div style="text-align: right">
                <el-link type="info" :underline="false" href="/login">已有账号直接登录？</el-link>
            </div>
        </el-form>
    </div>
</template>

<script>

    import {sendCheckCode,register,checkUsername} from "../network/register";

    export default {
        name: "Register",
        data() {
            let validateUsername = (rule,value,callback) => {
                let username_regx = /^[0-9a-zA-Z]{5,10}$/;
                if (!username_regx.test(value)){
                    //如果输入的确认密码不等于密码的话就报错’
                    this.usernameState = false;
                    return callback(new Error('用户名需要5到10位'));
                }
                checkUsername(value).then(data => {
                    if (data.meta === 500){
                        this.usernameState = false;
                        return callback(new Error('已有此用户名'));
                    }
                });
                this.usernameState = true;
                callback();
            };
            let validateRePassword = (rule,value,callback) => {
                if (value !== this.form.password){
                    //如果输入的确认密码不等于密码的话就报错’
                    return callback(new Error('两次密码不一致'));
                }
                return callback();
            };
            let validateEmail = (rule,value,callback) => {
                let email_regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if (!email_regex.test(value)){
                    //如果输入的确认密码不等于密码的话就报错’
                    this.emailState = false;
                    return callback(new Error('邮箱输入格式错误'));
                }
                this.emailState = true;
                return callback();
            };
            let validatePhone = (rule,value,callback) => {
                let phone_regex = /^1[3456789]\d{9}$/;
                if (!phone_regex.test(value)){
                    //如果输入的确认密码不等于密码的话就报错’
                    return callback(new Error('电话号码格式有误'));
                }
                return callback();
            };
            return {
                usernameState: false,
                emailState: false,
                reClick: false,
                form: {
                    username: '',
                    password: '',
                    rePassword: '',
                    email: '',
                    phone: '',
                    qq: '',
                    checkCode: ''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { validator: validateUsername, trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
                    ],
                    rePassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' },
                        { validator: validateRePassword, trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { validator: validateEmail, trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入电话号码', trigger: 'blur' },
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                    qq: [
                        { required: true, message: '请输入qq', trigger: 'blur' },
                    ],
                    checkCode: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        register(this.form.username,this.form.password,this.form.email,this.form.phone,
                            this.form.qq,this.form.checkCode).then(data => {
                                if (data.meta === 200){
                                    this.$message({
                                        type: 'success',
                                        message: data.info
                                    });
                                }else {
                                    this.$message.error(data.info);
                                }
                        }).catch(err => {
                            this.$message.error(err);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getCheckCode(){
                setTimeout(() => {
                    this.reClick = false;
                },1000 * 60);
                // this.reClick = true;
                sendCheckCode(this.form.username,this.form.email).then(data => {
                    if (data.meta === 200){
                        this.$message({
                            message: data.info,
                            type: 'success'
                        });
                        thid.$router.push('/login')
                    }else {
                        this.$message.error(data.info)
                    }

                }).catch(err => {
                    this.$message.error('获取验证码出现问题');
                });
            }
        }
    }
</script>

<style scoped>
    .title{
        position: absolute;
        left: 50%;
        /*top: 50%;*/
        transform: translate(-50%,0%);
    }

    .register_container{
        background: #f5f5f5;
        height: 100%;
    }

    .login_box{
        width: 450px;
        height: 610px;
        background-color: #fff;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .img_head{
        width: 130px;
        height: 130px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        border: 1px solid gray;
        box-shadow: 0 0 10px #000;
    }

    .login_form{
        width: 370px;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .img_head img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }
</style>